<template>
    <div class="alarm-content">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1>Alarm Management
                <!-- 顶部操作按钮 -->
                <span class="top-actions">
                    <AButton type="text" class="action-btn">
                        <PoweroffOutlined />Main Power&Emergency
                    </AButton>
                </span>
            </h1>
        </div>

        <div class="alarm-wrapper">
            <!-- 左侧Interlock Configuration -->
            <div class="interlock-config">
                <h2>Interlock Configuration</h2>

                <!-- 操作按钮 -->
                <div class="action-buttons">
                    <AButton class="import-btn">
                        <template #icon>
                            <PlusCircleFilled class="icon-plus" />
                        </template>
                        import
                    </AButton>
                    <AButton type="primary" danger class="delete-btn">
                        <MinusCircleFilled />
                    </AButton>
                </div>

                <!-- 搜索栏 -->
                <div class="search-bar">
                    <SearchOutlined />
                    <input type="text" placeholder="Search..." />
                </div>

                <!-- Interlock Template -->
                <div class="template-section">
                    <div class="section-header">
                        <PlusCircleFilled class="add-icon" />Interlock Template
                        <ASelect v-model:value="selectedTemplate" class="select-btn">
                            <ASelectOption value="template1">Interlock Template</ASelectOption>
                        </ASelect>
                    </div>
                    <div class="template-items">
                        <div v-for="(item, index) in interlockTemplates" :key="index" class="template-item"
                            :class="{ 'selected': selectedInterlockTemplate === item }"
                            @click="selectInterlockTemplate(item)">
                            <div class="template-info">
                                <div class="template-icon">
                                    <FileTextOutlined class="success-icon" />
                                </div>
                                <div class="template-name">{{ item.name }}</div>
                                <span @click="openEditModal(item, $event)" class="edit-btn">Edit></span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- My Template -->
                <div class="template-section">
                    <div class="section-header">
                        <PlusCircleFilled class="add-icon" />My Template
                    </div>
                    <div class="template-items">
                        <!-- 空的My Template区域 -->
                    </div>
                </div>
            </div>

            <!-- 右侧Alarm status -->
            <div class="alarm-status">
                <h2>Alarm status</h2>

                <!-- 操作按钮 -->
                <div class="action-buttons">
                    <AButton class="import-btn">
                        <template #icon>
                            <PlusCircleFilled class="icon-plus" />
                        </template>
                        import
                    </AButton>
                </div>

                <!-- 报警参数表格 -->
                <div class="alarm-table">
                    <table>
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Result</th>
                                <th>
                                    <div class="threshold-header">
                                        <div class="threshold-icons">
                                            <div class="threshold-icon warning"/>
                                            <span class="operators">></span>
                                        </div>
                                    </div>
                                </th>
                                <th>
                                    <div class="threshold-header">
                                        <div class="threshold-icons">
                                            <div class="threshold-icon warning"/>
                                            <span class="operators"><</span>
                                        </div>
                                    </div>
                                </th>
                                <th>
                                    <div class="threshold-header">
                                        <div class="threshold-icons">
                                            <div class="threshold-icon danger"></div>
                                            <span class="operators">></span>
                                        </div>
                                    </div>
                                </th>
                                <th>
                                    <div class="threshold-header">
                                        <div class="threshold-icons">
                                            <div class="threshold-icon danger"></div>
                                            <span class="operators"><</span>
                                        </div>
                                    </div>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(alarm, index) in alarmParameters" :key="index">
                                <td>{{ alarm.no }}</td>
                                <td>{{ alarm.result }}</td>
                                <td>
                                    <div class="input-group" v-if="alarm.hasInputs">
                                        <AInput v-model:value="alarm.value1" class="threshold-input" />
                                        <span class="unit">{{ alarm.unit }}</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="input-group" v-if="alarm.hasInputs">
                                        <AInput v-model:value="alarm.value2" class="threshold-input" />
                                        <span class="unit">{{ alarm.unit }}</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="input-group" v-if="alarm.hasInputs">
                                        <AInput v-model:value="alarm.value1" class="threshold-input" />
                                        <span class="unit">{{ alarm.unit }}</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="input-group" v-if="alarm.hasInputs">
                                        <AInput v-model:value="alarm.value2" class="threshold-input" />
                                        <span class="unit">{{ alarm.unit }}</span>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 编辑弹窗 -->
        <WModal v-model:visible="editModalVisible" title="Edit Template" width="400px" class="edit-modal"
            @cancel="closeEditModal">
            <div class="edit-content">
                <div class="form-group">
                    <label>Template Name:</label>
                    <AInput v-model:value="editingTemplateName" placeholder="Enter template name" />
                </div>
                <div class="form-group">
                    <label>Description:</label>
                    <ATextarea v-model:value="editingTemplateDesc" placeholder="Enter description" />
                </div>
            </div>
            <template #footer>
                <ASpace>
                    <AButton @click="closeEditModal">Cancel</AButton>
                    <AButton type="primary" @click="handleEditSave">Save</AButton>
                </ASpace>
            </template>
        </WModal>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import {
    SearchOutlined,
    PlusCircleFilled,
    PlusOutlined,
    FileTextOutlined,
    PoweroffOutlined,
    MinusCircleFilled
} from '@ant-design/icons-vue';
import './index.scss';

// 定义组件属性
defineOptions({
    name: 'AlarmComponent'
});

// 响应式数据
const selectedTemplate = ref('template1');
const selectedInterlockTemplate = ref(null);
const editModalVisible = ref(false);
const editingTemplate = ref(null);
const editingTemplateName = ref('');
const editingTemplateDesc = ref('');

// Interlock模板数据
const interlockTemplates = ref([
    { name: 'Template A - Circuit Breaker' },
    { name: 'Template A - Circuit Breaker' },
    { name: 'Template A - Circuit Breaker' },
    { name: 'Template A - Circuit Breaker' },
    { name: 'Template A - Circuit Breaker' }
]);

// 报警参数数据
const alarmParameters = ref([
    { no: '123', result: 'Opening time', hasInputs: true, unit: 'ms', value1: '', value2: '' },
    { no: '123', result: 'Closing time', hasInputs: true, unit: 'ms', value1: '', value2: '' },
    { no: '123', result: 'Opening speed', hasInputs: true, unit: 'm/s', value1: '', value2: '' },
    { no: '123', result: 'Closing speed', hasInputs: true, unit: 'm/s', value1: '', value2: '' },
    { no: '123', result: 'Opening overshoot', hasInputs: true, unit: 'ms', value1: '', value2: '' },
    { no: '123', result: 'Closing overshoot', hasInputs: true, unit: 'ms', value1: '', value2: '' },
    { no: '123', result: 'Resistance(voltage drop)', hasInputs: true, unit: 'Ω', value1: '', value2: '' },
    { no: '123', result: 'Density monitor (pressure)', hasInputs: true, unit: 'Bar', value1: '', value2: '' },
    { no: '123', result: 'Main contactor asynchronism', hasInputs: false, unit: '', value1: '', value2: '' },
    { no: '123', result: '3 poles drive asynchronism', hasInputs: false, unit: '', value1: '', value2: '' },
    { no: '123', result: 'Asynchronism drive and main contactor', hasInputs: false, unit: '', value1: '', value2: '' },
    { no: '123', result: 'External interlock', hasInputs: false, unit: '', value1: '', value2: '' }
]);



// 方法
const selectInterlockTemplate = (template) => {
    selectedInterlockTemplate.value = template;
    console.log('Selected interlock template:', template);
};

const openEditModal = (template, event) => {
    event.stopPropagation();
    editingTemplate.value = template;
    editingTemplateName.value = template.name || '';
    editingTemplateDesc.value = template.description || '';
    editModalVisible.value = true;
};

const closeEditModal = () => {
    editModalVisible.value = false;
    editingTemplate.value = null;
    editingTemplateName.value = '';
    editingTemplateDesc.value = '';
};

const handleEditSave = () => {
    console.log('Saving edited template:', editingTemplate.value);
    console.log('New name:', editingTemplateName.value);
    console.log('New description:', editingTemplateDesc.value);

    // 这里可以添加保存逻辑
    closeEditModal();
};
</script>
